@img: 40px;
@100pct: 100%;
@headHeight: 80px;
.login {
  width: @100pct;
  height: @100pct;
  background: url(./imgs/bg.jpg) no-repeat;
  background-size: cover;
  .login-header {
    height: @headHeight;
    background: rgba(21, 20, 13, 0.5);
    display: flex;
    align-items: center;
    .logo {
      width: @img;
      height: @img;
      margin-right: 10px;
    }
    h1 {
      font-size: 40px;
      color: white;
      margin: 0;
    }
  }
  .content {
    width: @100pct;
    height: calc(100vh - @headHeight);
    min-height: 400px;
    position: relative;
    .login-form {
      border-radius: 5px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 400px;
      background-color: white;
      padding: 20px 40px 40px;
      box-shadow: 0 0 3px gray;
      h1 {
        font-size: 30px;
        text-align: center;
        margin: 0;
        font-weight: bold;
      }
    }
  }
}
